<!--
1）只有定位（position），才有z-index属性
    // z-index对static无效，static以父元素为基准平面
        static
    // 都是以父元素为基准平面，若设置负值，就会在父元素基准平面之下
        relative
        absolute
        fixed
        sticky
2）所有定位盒子默认值都是
    - z-index: auto;
    - 表示与父元素相等的次序
3）z-index相同时：后来居上
    - 根据html结构中声明定位盒子的顺序，靠后的定位盒子会压着靠前的定位盒子


下图中演示：上面的会压着下面的

    ------- z-index：正数
    ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑父元素平面上方↑↑↑↑↑
    ------- 父元素基准平面 ---------
    ------- z-index：0、auto（按html顺序：后压前）
    ------- float（子压父）
    ------- static、标准流块盒子
    ------- 父元素基准平面 ---------
    ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓父元素平面下方↓↓↓↓↓
    ------- z-index: 负数

-->
<style>
    body {
        margin: 0;
        padding: 0;
    }
    .zzz {
        width: 200px;
        height: 200px;
    }
    .zero {
        position: static;
        /* 无效，仍旧是父元素基准平面 */
        z-index: 99;
        background-color: gray;
    }
    .one {
        /* 父元素基准平面的：下方 */
        z-index: -99;
        position: absolute;
        top: 25px;
        left: 25px;
        background-color: red;
    }
    .two {
        /* 父元素基本平面 */
        position: absolute;
        top: 50px;
        left: 50px;
        background-color: orange;
    }
</style>

<div class="zzz zero">zero</div>
<div class="zzz one">one</div>
<div class="zzz two">two</div>